<template>
  <div :class="['tab-vessel', 'relative',{
    'tab-line--hidden':tabLineHidden
  }]">

    <el-tabs v-bind="tabsProps"
             v-on="$listeners">
      <el-tab-pane v-bind="tabPaneProps"
                   v-for="option in options"
                   :key="option.value"
                   :label="option.label"
                   :name="option.value">
          <slot :name="`${option.value}Content`"></slot>
      </el-tab-pane>
    </el-tabs>
    <!-- <div class="tab-vessel__right absolute"
         v-if="tabPosition === 'top' && $slots.tabRight">
      <slot name="tabRight"></slot>
    </div> -->
  </div>

</template>

<script>
import { Tabs, TabPane } from 'element-ui'
import { pick, omit } from 'lodash'
export default {
  name: 'TabVessel',
  props: {
    ...Tabs.props,
    ...TabPane.props,
    options: {
      type: Array,
      default: () => ([])
    },
    tabLineHidden: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    tabsProps () {
      return pick(this.$props, Object.keys(Tabs.props))
    },
    tabPaneProps () {
      return pick(this.$props, omit(Object.keys(TabPane.props), ['label', 'name']))
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-vessel {
  &.tab-line--hidden{
    ::v-deep .el-tabs__nav-wrap{
      &::after{
        // display: none;
      }
    }
  }
  &__right {
    right: 0;
    top: 0;
  }
}
</style>
